<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <title>Document</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        #button {
            margin-right: 50px;
            float: right;
        }

        #roomInfometion {
            margin-right: 100px;
            float: right;
        }

        .imgRoom {
            float: left;
            margin-top: 20px;
            margin-left: 50px;
        }

        .countTime {
            margin-left: 40px;
        }

        .roomNumber {
            margin-left: 40px;
        }

        #superAdmin {
            margin-left: 20px;
        }

        #boyhead {
            width: 100%;
            height: 30px;
        }

        #roomShowAll {
            width: 1000px;
            height: 800px;
            /*text-align: center;
            margin: auto;
            margin-left: 40px;*/
        }
    </style>

    <script>
        $(function () {
            $.get("${pageContext.request.contextPath}/room/findAll",{}, function (data) {
                console.log(data);
                var strs = '';
                var countEmptyRoom=0;
                var countFillRoom=0;
                for (var i = 0; i < data.length; i++) {
                    var room = data[i];
                    if(room.roomFlag=='空'){
                        var str = '<div class="col-md-3">\n' +
                            '                                <a href="javascript:;">\n' +
                            '                                    <img src="../images/DanRen.jpg" alt="" width="150px" height="200px">\n' +
                            '                                </a>\n' +
                            '                                    <div class="has_border">\n' +
                            '            <span class="roomNumber">' + room.roomNumber + '号(<span id="status">' + room.roomFlag + '</span>)</span><br/>\n' +
                            '            <span class="countTime">剩余<span id="day"></span>天<span id="hour"></span>时</span>' +
                            '                                    </div>\n' +
                            '                            </div>';
                        strs += str;
                        countEmptyRoom++;
                    }else{
                        var str = '<div class="col-md-3">\n' +
                            '                                <a href="javascript:;">\n' +
                            '                                    <img src="../images/DanRen.jpg" alt="" width="150px" height="200px">\n' +
                            '                                </a>\n' +
                            '                                    <div class="has_border">\n' +
                            '            <span class="roomNumber">' + room.roomNumber + '号(<span id="status">' + room.roomFlag + '</span>)</span><br/>\n' +
                            '            <span class="countTime">剩余<span id="day"></span>天<span id="hour"></span>时</span>' +
                            '                                    </div>\n' +
                            '                            </div>';
                        strs += str;
                        countFillRoom++;
                    }
                }
                var superStr='<div class="col-md-3">\n' +
                    '                                <a href="javascript:;">\n' +
                    '                                    <img src="../images/addRoom.png" alt="" width="150px" height="200px">\n' +
                    '                                </a>\n' +
                    '                                    <div class="has_border">\n' +
                    '            <span class="roomNumber">添加房间</span><br/>\n' +
                    '            <span id="superAdmin">超级管理员可操作</span>' +
                    '                                    </div>\n' +
                    '                            </div>';
                strs+=superStr;
                $(".row").html(strs);
                var countRoom=data.length;
                $("#countRoom").text(countRoom);
                $("#countFillRoom").text(countEmptyRoom);
                $("#countEmptyRoom").text(countFillRoom);
            });
        });

       function emptyRoom(){
           $.get("/room/findAll",{}, function (data) {
               var strs = '';
               for (var i = 0; i < data.length; i++) {
                   if (data[i].roomFlag == '空'){
                       var room = data[i];
                       var str = '<div class="col-md-3">\n' +
                           '                                <a href="javascript:;">\n' +
                           '                                    <img src="../images/DanRen.jpg" alt="" width="150px" height="200px">\n' +
                           '                                </a>\n' +
                           '                                    <div class="has_border">\n' +
                           '            <span class="roomNumber">' + room.roomNumber + '号(<span id="status">' + room.roomFlag + '</span>)</span><br/>\n' +
                           '            <span class="countTime">剩余<span id="day"></span>天<span id="hour"></span>时</span>' +
                           '                                    </div>\n' +
                           '                            </div>';
                       strs += str;
                   }
               }
               $(".row").html(strs);
           });


       }

        function allRoom() {
            $.get("/room/findAll", {}, function (data) {
                var strs = '';
                for (var i = 0; i < data.length; i++) {
                    var room = data[i];
                    var str = '<div class="col-md-3">\n' +
                        '                                <a href="javascript:;">\n' +
                        '                                    <img src="../images/DanRen.jpg" alt="" width="150px" height="200px">\n' +
                        '                                </a>\n' +
                        '                                    <div class="has_border">\n' +
                        '            <span class="roomNumber">' + room.roomNumber + '号(<span id="status">' + room.roomFlag + '</span>)</span><br/>\n' +
                        '            <span class="countTime">剩余<span id="day"></span>天<span id="hour"></span>时</span>' +
                        '                                    </div>\n' +
                        '                            </div>';
                    strs += str;
                }
                $(".row").html(strs);
            });
        }
    </script>

</head>
<body>
<div id="boyhead">
    <div id="button">
        <input id="emptyRoom" type="button" value="空房" onclick="emptyRoom()">
        <input id="allRoom" type="button" value="全部" onclick="allRoom()">
    </div>
    <div id="roomInfometion">共<span id="countRoom">0</span>间&nbsp;&nbsp;入住&nbsp;:&nbsp;<span id="countFillRoom">0</span>间&nbsp;&nbsp;剩余&nbsp;:&nbsp;<span id="countEmptyRoom">0</span>间</div>
</div>


<div class="content">
        <div class="row">
            <!-- <div class="imgRoom">
                    <img src="../images/DanRen.jpg" width="150px" height="200px"/><br/>
                    <span class="roomNumber">301号(<span id="status"></span>)</span><br/>
                    <span class="countTime">剩余<span id="day"></span>天<span id="hour"></span>时</span>
                    </div> -->
    </div>
</div>


</body>
</html>